<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>申请退款</title>
    <link rel="stylesheet" href="http://cdn.suoluomei.com/common/js/css/wpf/weui.css" />
    <link rel="stylesheet" href="http://cdn.suoluomei.com/common/js/css/wpf/jquery-weui.css" />
    <link rel="stylesheet" href="http://cdn.suoluomei.com/common/js/css/wpf/weui.min.css" />

    <style>
        *{padding: 0;margin: 0;}
        .wpf_orderBox{position: relative;overflow-x: hidden;width: 100%;}
        .weui-cells,.weui-panel{margin-top: 0;}
        .weui-cell__hd img{margin-right: 15px;}
        .weui-media-box_appmsg .weui-media-box__hd{width: 70px;height: 70px;}
        .weui-media-box__title{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;white-space: pre-wrap;line-height: 18px;font-size: 16px;color: #373938;}
        .refresh_box{width: 100%;display: flex;position: relative;padding: 10px 15px;box-sizing: border-box;}
        .refresh_name,.refresh_add{flex: 1;}

        .weui-cell__ft_input{line-height: 25px;border: none;font-size: 16px;text-align: right;padding-right: 10px;box-sizing: border-box;}
        .refresh_money,.refresh_zd,.refresh_sm{padding: 8px 15px;box-sizing: border-box;}
        .refresh_money,.refresh_sm{background: #ffffff;}
        .refresh_money_span{color: #FF3E55}
        .refresh_zd{background: #e5e5e5;font-size: 14px;color: #888888;}
        .refresh_sm_span{display: inline-block;}
        .refresh_sm_input{line-height: 22px;border: none;font-size: 16px;width: calc(100% - 80px);padding-left: 10px;box-sizing: border-box;}
        .weui-uploader__info{font-size: 12px;}
        .refresh_btn{width: 100%;height: 45px;line-height: 45px;overflow: hidden;position: fixed;bottom: 0;left: 0;background: #FE0036;letter-spacing: 2px;text-align: center;color: #ffffff;font-size: 16px;z-index: 10;}

        .weui-check__label_box{display: flex;padding: 15px 15px 15px 0;box-sizing: border-box;position: relative;}
        .weui-check__label_box:after{content: '';width: 100%;height: 1px;background: #E5E5E5;position: absolute;bottom: 0;left: 0;}
        .weui-media-box__number_Box{position: relative;display: flex;padding-top: 5px;box-sizing: border-box;text-align: center;}
        .weui-media-box__number{color: #999999;font-size: 14px;padding-right: 15px;box-sizing: border-box;line-height: 25px;}
        .weui-media-box__sum{border: 1px solid #e5e5e5;box-sizing: border-box;display: flex;z-index: 999;}
        .weui-media-box__jian,.weui-media-box__jia{width: 30px;height: 25px;line-height: 25px;position: relative;}
        .weui-media-box__jian:after{content: '';width: 1px;height: 100%;background: #e5e5e5;position: absolute;right: 0;top: 0;}
        .weui-media-box__jia:before{content: '';width: 1px;height: 100%;background: #e5e5e5;position: absolute;left: 0;top: 0;}
        .weui-media-box__val{height: 25px;line-height: 25px;}
        .weui-media-box__val input{width: 40px;line-height: 20px;border: none;text-align: center;}

        .weui-gallery{display: none;}
        .weui-icon-delete{padding-left: 10px;box-sizing: border-box;}
        .weui-icon-close{padding-right: 10px;box-sizing: border-box;}
        .weui-icon-close:before{background-image: url(__PUBLIC__/orderImg/close.svg);width: 22px;height: 22px;background-size: 100% 100%;content: ''}

    </style>
</head>
<body>
<div class="wpf_orderBox">
    <div class="refresh_box">
        <div class="refresh_name">请选择退款商品</div>
    </div>
    <div class="weui-cells weui-cells_checkbox weui-cells_checkbox_list">
        <!--后台插入数据-->

    </div>

    <div style="height: 8px;background: #e5e5e5;"></div>
    <div class="weui-cells">
        <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
                <p>货物状态</p>
            </div>
            <div class="weui-cell__ft">
                <input class="weui-cell__ft_input choice" id="goods_status" type="text" value="" placeholder="请选择">
            </div>
        </a>
        <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
                <p>退款原因</p>
            </div>
            <div class="weui-cell__ft">
                <input class="weui-cell__ft_input choice"  id="goods_cause" type="text" value="" placeholder="请选择">
            </div>
        </a>
        <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
                <p>退款方式</p>
            </div>
            <div class="weui-cell__ft">
                <!--onfocus='this.blur();'-->
                <input class="weui-cell__ft_input choice"  id="goods_refund_way" type="text" value="" placeholder="请选择">
            </div>
        </a>
        <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
                <p>退款账号</p>
            </div>
            <div class="weui-cell__ft">
                <input class="weui-cell__ft_input outfocus"  id="goods_refund_account" type="number" value="" placeholder="请填写退款账号">
            </div>
        </a>
        <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__bd">
                <p>收款人</p>
            </div>
            <div class="weui-cell__ft">
                <input class="weui-cell__ft_input outfocus"  id="goods_refund_name" type="text" value="" placeholder="请填写收款人">
            </div>
        </a>
    </div>
    <div style="height: 8px;background: #e5e5e5;"></div>
    <div class="refresh_money">退款金额：<span class="refresh_money_span"></span></div>
    <div class="refresh_zd">最多<span class="refresh_zd_m"></span>，含发货邮费<span class="refresh_zd_y"></span></div>
    <div class="refresh_sm">
        <span class="refresh_sm_span">退款说明：</span><input type="text" class="refresh_sm_input" placeholder="选填">
    </div>
    <div style="height: 8px;background: #e5e5e5;"></div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title">上传凭证</p>
                        <div class="weui-uploader__info">提示：(最多上传三张)</div>
                    </div>
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles">
                            <!--<li class="weui-uploader__file" style="background-image:url(__PUBLIC__/orderImg/5.jpg)"></li>-->
                        </ul>
                        <div class="weui-uploader__input-box">
                            <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="" onchange='preview(this)'>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="weui-gallery">
        <!--<div class="weui-gallery_box">-->
            <!--<span class="weui-gallery__img" style="background-image: url(__PUBLIC__/orderImg/5.jpg);"></span>-->
            <!--<div class="weui-gallery__opr">-->
                <!--<a href="javascript:" class="weui-gallery__del">-->
                    <!--<i class="weui-icon-close weui-icon_gallery-close"></i>-->
                    <!--<i class="weui-icon-delete weui-icon_gallery-delete"></i>-->
                <!--</a>-->
            <!--</div>-->
        <!--</div>-->
    </div>
    <div style="height: 45px;"></div>
    <div class="refresh_btn" onclick="btn_refund()">提交</div>
</div>
</body>
</html>
<script src="http://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="http://cdn.suoluomei.com/common/js/jquery-weui.js"></script>
<script src="http://cdn.suoluomei.com/common/js2.0/city-picker/city-picker.min.js"></script>
<script>
    var id = 0;
    var fileinfo = []
    function preview(file) {
        if (file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function(evt) {
                var fileObj = document.getElementById("uploaderInput").files[0]; // js 获取文件对象
                var formFile = new FormData();
                formFile.append("key", "Gn1xVdBiTClSSHKZifg0pTQSU5XGagWO");
                formFile.append("file", fileObj); //加入文件对象
                var data = formFile;
                $.ajax({
                    url: "http://ydnshop.hepulanerp.com/sucai_t/public/index.php/post/post/uploadFile",
                    data: data,
                    type: "Post",
                    dataType: "json",
                    cache: false,//上传文件无需缓存
                    processData: false,//用于对data参数进行序列化处理 这里必须false
                    contentType: false, //必须
                    success: function (result) {
                        console.log(result)
                        let img_url = {};
                        img_url.filename = result.info.name
                        img_url.path = result.info.url;
                        fileinfo.push(img_url)
                        console.log(fileinfo)
                    }
                });
                $('#uploaderFiles').append('<li class="weui-uploader__file" id="'+ id +'" data-id="'+ id +'" style="background-image:url('+ evt.target.result +')"></li>');
                if(fileinfo.length == 2){
                    $('.weui-uploader__input-box').css('display','none');
                }
                id ++;
            }
            reader.readAsDataURL(file.files[0]);
        } else {}
    }

    function btn_refund(){
        window.location.href="detail_refund.html";
    }
    $(document).ready(function (){
        // 获取后台数据
        let key = '2b029d40d498184def791ff46e189670'
        let code = "10408030450361573078"
        $.ajax({
            type: "POST",
            url: 'http://test2.herbplantist.com/api/apiRequest2.php?m=getOrderInfo',
            data: {
                key: key,
                code: code,
            },
            dataType: "json",
            success: function (res) {
                console.log(res)
                if(res.errcode == 0){
                    $('.refresh_money_span').html('￥'+ res.data.productmoney)
                    $('.refresh_zd_m').html('￥'+ res.data.productmoney)
                    $('.refresh_zd_y').html('￥'+ res.data.franking)
                    for (let i = 0; i < res.data.goods.length; i++) {
                        let myli = '<div class="weui-check__label_box">\n' +
                            '            <label class="weui-cell weui-check__label" for="s1'+ i +'">\n' +
                            '                <div class="weui-cell__hd">\n' +
                            '                    <input type="checkbox" class="weui-check" name="checkbox1" id="s1'+ i +'" checked="checked">\n' +
                            '                    <i class="weui-icon-checked"></i>\n' +
                            '                </div>\n' +
                            '            </label>\n' +
                            '            <div class="weui-cell__bd">\n' +
                            '                <h4 class="weui-media-box__title">'+ res.data.goods[i].name +'</h4>\n' +
                            '                <div class="weui-media-box__number_Box">\n' +
                            '                    <div class="weui-media-box__number">数量：</div>\n' +
                            '                    <div class="weui-media-box__sum">\n' +
                            '                        <div class="weui-media-box__jian">-</div>\n' +
                            '                        <div class="weui-media-box__val"><input type="number" data-max="'+ (res.data.goods[i].num - res.data.goods[i].return_num) +'" class="weui-media-box__val_input" readonly="readonly" value="'+ (res.data.goods[i].num - res.data.goods[i].return_num) +'"></div>\n' +
                            '                        <div class="weui-media-box__jia">+</div>\n' +
                            '                    </div>\n' +
                            '                </div>\n' +
                            '            </div>\n' +
                            '        </div>';
                        $('.weui-cells_checkbox_list').append(myli);
                    }
                }else{
                    $.toast(res.msg, "text");
                }
            }
        })
        // 后台获取下拉选择退款原因
        var goods_cause = []
        var goods_cause_name = []
        $.ajax({
            type: "POST",
            url: 'http://test2.herbplantist.com/api/apiRequest2.php?m=getReturnReason',
            data: {

            },
            dataType: "json",
            success: function (res) {
                console.log(res)
                if (res.errcode == 0) {
                    goods_cause = res.data
                    for(let i in res.data){
                        goods_cause_name[i] = res.data[i].reason
                    }
                }else{
                    $.toast(res.msg, "text");
                }
            }
        })
        // 点击减号
        $(document).on('click', '.weui-media-box__jian', function (){
            let that = $(this);
            let input =  that.next().find('input');
            let val = input.val()
            console.log('-',val)
            if(val != 1){
                input.val(parseInt(val) - 1);
            }
        })
        // 点击加号
        $(document).on('click', '.weui-media-box__jia', function (){
            let that = $(this);
            let input =  that.prev().find('input');
            let max = input.data('max')
            let val = input.val()
            if(val >= max){
                input.val(parseInt(max));
            }else{
                input.val(parseInt(val) + 1);
            }
            console.log('+',val)
        })
        // 下拉选择货物状态
        $("#goods_status").picker({
            title: "请选择货物状态",
            cols: [
                {
                    textAlign: 'center',
                    values: ['未收到货', '已收到货']
                }
            ]
        });
        // 下拉选择退款原因
        $("#goods_cause").picker({
            title: "请选择退款原因",
            cols: [
                {
                    textAlign: 'center',
                    values: goods_cause_name
                }
            ]
        });
        // 下拉选择退款方式
        $("#goods_refund_way").picker({
            title: "请选择退款原因",
            cols: [
                {
                    textAlign: 'center',
                    values: ['支付宝', '银行卡账户']
                }
            ]
        });
        // 离焦事件
        $(document).on('touchstart','.choice', function(){
            $(".outfocus").blur();
        });
        // 点击图片放大
        $(document).on('click', '.weui-uploader__file', function (){
            let that = this
            let i = $(that).data('id')
            let myli = '<div class="weui-gallery_box">\n' +
                '            <span class="weui-gallery__img" style="background-image: url('+ fileinfo[i].path +');"></span>\n' +
                '            <div class="weui-gallery__opr">\n' +
                '                <a href="javascript:" class="weui-gallery__del">\n' +
                '                    <i class="weui-icon-close weui-icon_gallery-close"></i>\n' +
                '                    <i class="weui-icon-delete weui-icon_gallery-delete" data-index="'+ i +'"></i>\n' +
                '                </a>\n' +
                '            </div>\n' +
                '        </div>';
            $('.weui-gallery').append(myli);
            $('.weui-gallery').fadeIn(600)
        })
        // 点击关闭按钮
        $(document).on('click', '.weui-icon-close', function (){
            $('.weui-gallery_box').remove();
            $('.weui-gallery').fadeOut(600)
        })
        // 删除图片
        $(document).on('click', '.weui-icon-delete', function (){
            let that = this
            let i = $(that).data('index')
            fileinfo.splice(i,1)
            $('#'+ i).remove();
            $("[data-index]").each(function (index, item) {
                $(item).attr("data-index",index)
            })
            $("[data-id]").each(function (index, item) {
                $(item).attr("data-id",index)
                $(item).attr("id",index)
            })
            id = fileinfo.length
            $('.weui-gallery_box').remove();
            $('.weui-gallery').fadeOut(600)
            $('.weui-uploader__input-box').css('display','block');
        })

    });

</script>